<template>
  <div class="common-layout">
    <el-container>
      <el-header class="title">
        <el-button
          type="primary"
          size="large"
          style="font-weight: bold; margin-top: 13px"
          class="derive"
          plain
          @click="comeBackCompany"
          >返回
        </el-button>
        <el-button
          type="primary"
          size="large"
          style="font-weight: bold; margin-top: 13px"
          class="derive"
          plain
          @click="goToHome"
          >首页
        </el-button>
      </el-header>
      <el-main>
      <el-card >
        <template #header>
          <div class="card-header">
            <SvgIcon
              iconName="icon-xml"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon
            >
            <span>AndroidManifest.xml</span>
          </div>
        </template>
        <CodeMirror
          v-if="visible"
          v-model:code="code"
          :codeStyle="{  height: '1000px', fontSize: '16px' }"
        />
      </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { Bottom } from "@element-plus/icons-vue";
import { onMounted, ref,onBeforeMount,defineAsyncComponent } from "vue";
import { Codemirror } from "vue-codemirror";
import { useRouter,useRoute } from "vue-router";
// import CodeMirror from "./CodeMirror.vue";
import { viewFileAPI } from "@/apis/anay.js";
const CodeMirror = defineAsyncComponent(()=>{
  return import("./CodeMirror.vue")
})
const code = ref("No Data");
const router = useRouter();
const route = useRoute();
const visible = ref(false)
const goToHome = () => {
  router.push({
    name: "home",
  });
};
const comeBackCompany = () => {
  router.back();
}

onBeforeMount(async () => {
  const filepath = route.query.manifest_path;
  // console.log(filepath)
  const response = await viewFileAPI(filepath);
  code.value = response.data.content;
  visible.value = true
});
</script>

<style scoped>
.card-header{
  display: flex;
}
.svg-icon{
  height: 30px;
  width: 30px;
}
.card-header span{
  font-size: 16px;
  margin-top:5px
}
.el-button {
  float: right;
  margin-right: 20px;
}
.title {
  position: sticky;
  right: 20px;
  top: 0;
  z-index: 9999;
  width: 100%;
  background-color: #fff;
  padding: 0 0;
  border-bottom: 1px solid rgb(194, 196, 197);
}
</style>